<template>
  <div class="container">
    <div class="content">
      <div class="headers">
        <!-- <i class="icon mt-location-o" :style="{background:'#fff',display:'inline-block',color: '#434343', 'font-size': 38 + 'rpx'}"></i> -->
        <img
          src="../../../static/images/dingwei.png"
          alt=""
					mode="widthFix"
          style="width:32rpx;height:40rpx;padding:0 10rpx 0 50rpx;"
        >
        <span
          :style="{background:'#fff;',display:'inline-block'}"
          @click="seachAdd"
        >{{address}}</span>
        <!-- <i class="icon mt-arrow-down-o" :style="{background:'#fff',display:'inline-block',color: '#434343', 'font-size': 38 + 'rpx'}"></i> -->
        <img
          src="../../../static/images/sanjiao.png"
          alt=""
          style="width:18rpx;height:18rpx;padding-left:10rpx;"
        >
      </div>
      <div class="search-c">
        <div
          class="search-bar"
          @click="searchClick"
        >
          <i
            class="icon mt-search-o"
            :style="{'font-size':38 + 'rpx'}"
          ></i>
          <input
            placeholder="请输入城市名称查询"
            placeholder-style="font-size: 24rpx"
            @input="search"
            disabled
          />
          <div
            class="cancle"
            v-if="keyword"
          >
            <i class="icon qb-icon-cancle-o"></i>
          </div>
        </div>
      </div>

      <!-- 商家分类 -->
      <swiper
        class="category-c"
        indicator-dots="true"
        indicator-color="#999"
        indicator-active-color="#FFC24A"
      >
        <div
          v-for="(item, index) in categoryArr"
          :key="index"
        >
          <swiper-item>
            <div class="grid-c">
              <div
                class="item"
                v-for="(itx, idx) in item.items"
                :key="idx"
                @click="sortClick"
              >
                <img
                  class="item-img"
                  :src="itx.url"
                  width="105"
                >
                <span class="item-title">{{itx.name}}</span>
              </div>
            </div>
          </swiper-item>
        </div>
      </swiper>

      <!--<div class="nav_">-->
      <!--<div class="nav_c">-->
      <!--<div class="nav_item">-->
      <!--<div class="item" v-for="(item,index) in categoryArr" :key="index">-->
      <!--<div><img :src="item.img" :style="{width:105+'rpx',height:105+'rpx'}" /></div>-->
      <!--<div class="nav_name">{{item.name}}</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="b-banner">
        <div
          class="recommended"
          @click="categoryClick"
        >
          <img src="../../../static/images/guanggao.png" />
        </div>
        <div class="section">
          <span class="m">推荐商家</span>
        </div>
        <div class="hot-sale">
          <div class="hot-sale_container">
            <div class="hot_banner">
              <img
                src="../../../static/images/hot_banner.png"
                alt=""
              >
              <div class="hot_img">
                <span>米香居手工西点(历山南路店)</span>
              </div>
              <img
                class="hot_logo"
                src="../../../static/images/lo.jpg"
                alt=""
              >
            </div>
            <div class="section1">
              <span class="m">精致西点5折起</span>
            </div>
            <div class="item_contain">
              <div
                class="item"
                v-for="(item, index) in bottomBanner.products"
                :key="index"
                @click="shoppingCartClick"
              >
                <div class="img-c">
                  <img :src="item.logo">
                  <div class="name-c">
                    <span class="name">{{item.name}}</span>
                  </div>
                </div>
                <span class="price">{{item.price}}</span>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="section">
        <span class="m">附近商家</span>
      </div>
      <!--附近商家列表-->
      <div class="category-list">
        <div class="item-list">
          <div
            class="item"
            v-for="(item, index) in shopsList"
            :key="index"
            @click="shoppingCartClick(item.id)"
          >
            <div class="item-l">
              <img :src="item.logo">
             
            </div>
            <div class="item-r">
              <div class="r-t">
                <span class="shop-name">{{item.name}}</span>
                <div class="t-c">
                  <div class="c-l">
                    <div class="l-l">
                      <i
                        class="icon mt-star-s"
                        v-for="(itx, idx) in stars"
                        :key="idx"
                      ></i>
                    </div>
                    <span class="l-m">{{item.wm_poi_score}}</span>
                    <span class="l-r">{{item.month_sales_tip}}</span>
                  </div>
                </div>
              </div>
              <div class="r-m">
                <span class="m-l">{{item.min_price_tip}}</span>
                <div class="m-m"></div>
                <span class="m-r">{{item.shipping_fee_tip}}</span>
                <div class="m-m"></div>
                <span class="m-r">{{item.average_price_tip}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {queryHomeHeadCategory} from '@/action/action'
import {homeData} from './data'
export default {
	data() {
		return {
			address: '', //当前地址
			city: '', //当前城市
			// categoryArr: [
			// 	{name: '西餐', img: '../../static/images/meishi.png'},
			// 	{name: '家常菜', img: '../../static/images/jiachang.png'},
			// 	{name: '快食简餐', img: '../../static/images/kuaishi.png'},
			// 	{name: '地方特色', img: '../../static/images/difang.png'},
			// ],
			categoryArr: [{items: []}],
			topBannerData: [],
			jingdu: '', //经度
			weidu: '', //纬度
			mobileLocation: '', //坐标
			img: '',
			bottomBanner: {},
			shopsList: [],
			filterList: [
				{
					title: '综合排序',
					icon: 'mt-arrow-down-o',
				},
				{
					title: '销量最高',
				},
				{
					title: '速度最快',
				},
				{
					title: '筛选',
					icon: 'mt-filter-o',
				},
			],
			tags: ['满减优惠', '点评高分', '新商家', '美团专送'],
			stars: [1, 2, 3, 4, 5],
			pageNum: 1, //当前页
		}
	},
	//跳转商家详情页
	goPage_(id) {},
	onLoad(options) {
		this.getLocationDing()
		// this.getAdress()
		//获取商店分类
		this.getReaurant()

		//获取推荐商家
		// this.getRecommendStore()
	},
	onShow() {
		// 获取当前坐标
		this.getlongitudeT()
	},
	// 上拉加载数据
	onReachBottom() {
		this.pageNum++
		this.getNerByStorelist()
	},
	methods: {
		//选择地址
		seachAdd() {
			this.$store.state.user.address = this.address
			this.$store.state.user.city = this.city
			wx.navigateTo({url: '/pages/selectAddress/main'})
		},
		//获取经纬度
		getlongitudeT() {
			var that = this
			wx.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.weidu = res.latitude
					that.jingdu = res.longitude
					//获取附近店家
					that.getNerByStorelist()
					// 获取推荐商家
					// that.getRecommendStore()
					that.getAdress()
				},
			})
		},

		//根据经纬度获取附近餐饮、
		getLocationDing() {
			let that = this
			var latitude = wx.getStorageSync('latitude') || []
			var longitude = wx.getStorageSync('longitude') || []
			if (latitude.length != 0 && longitude.length != 0) {
				that.weidu = latitude
				that.jingdu = longitude
			} else {
			}
		},
		//获取当前地址
		getAdress() {
			var that = this
			wx.request({
				url:
					'https://restapi.amap.com/v3/geocode/regeo?key=e80eace082b331e7da1bce2f3d7b73ec&location=' +
					that.jingdu +
					',' +
					that.weidu,
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded', // 默认值
				},
				success(res) {
					var street = res.data.regeocode.addressComponent.streetNumber.street
					var number = res.data.regeocode.addressComponent.streetNumber.number
					that.city = res.data.regeocode.addressComponent.city
					var address = street + number
					var searchData = wx.getStorageSync('searchData') || []
					if (searchData.length != 0) {
						that.address = searchData
					} else {
						that.address = address
					}
				},
			})
		},
		categoryClick() {
			wx.navigateTo({url: '/pages/share/main'})
		},
		/**
		 * 分类跳转
		 */
		sortClick() {
			wx.navigateTo({url: '/pages/categoryList/main'})
		},
		addressClick() {
			wx.navigateTo({url: '/pages/selectAddress/main'})
		},
		searchClick() {
			wx.navigateTo({url: '/pages/searchList/main'})
		},
		/**
		 * @Description: ${获取商家详情}
		 * @Param
		 * @Return
		 * @Author 李栋
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		//跳转商家详情
		shoppingCartClick(id,name,img) {
				this.$store.state.user.resId = id
			wx.navigateTo({url: '/pages/shoppingCart/main?id=' + id})
		},
		/**
		 * @Description: ${获取所有餐厅分类}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		getReaurant() {
			let getParams = {
				url: '/restaurantClassList',
				method: 'POST',
				data: {},
			}
			this.$JZWX(getParams).then(re => {
				if (re.status == 0) {
					// this.categoryArr = re.data
					re.data.map((item, index) => {
						if (index < 8) {
							this.categoryArr[0].items.push(item)
						}
					})
				}
			})
		},
		/**
		 * @Description: ${获取附近商家列表}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		getNerByStorelist() {
			var that = this
			wx.request({
				url: 'http://192.168.2.125:8200/api/get/getNearbyRestaurantList',
				method: 'POST',
				data: {
					longitude: this.jingdu,
					latitude: this.weidu,
					pageNum: this.pageNum,
					pageSize: 10,
					isRecommend: '',
				},
				success(res) {
					console.log(res)
					var list = that.shopsList.concat(res.data.data.list)
					that.shopsList = list
				},
			})

			// let getParams = {
			// 	url: '/get/getNearbyRestaurantList',
			// 	method: 'POST',
			// 	data: {
			// 		longitude: this.jingdu,
			// 		latitude: this.weidu,
			// 		pageNum: this.pageNum,
			// 		pageSize: 10,
			// 		isRecommend: 0,
			// 	},
			// }
			// this.$JZWX(getParams).then(re => {
			// 	this.shopsList=re.data.list
			// })
		},
		/**
		 * @Description: ${获取推荐商家}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		getRecommendStore() {
			let getParams = {
				url: '/get/getNearbyRestaurantList',
				method: 'POST',
				data: {
					longitude: this.jingdu,
					latitude: this.weidu,
					isRecommend: 1,
				},
			}
			this.$JZWX(getParams).then(re => {})
		},
	},
	mounted() {
		this.bottomBanner = homeData.bannerData.data.rcmd_board_v9.mid_ad_banner.platinum_banner
		// this.shopsList = homeData.homeList.data.poilist
	},
	created() {},
}
</script>

<style lang="scss" scoped>
@function rpx($value) {
	@return $value * 1rpx;
}
.container {
	background: #fff;
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		.headers {
			display: flex;
			align-items: center;
			background: #fff;
			span {
				font-size: 26rpx;
			}
		}
		.search-c {
			background-color: white;
			align-items: center;
			width: 100%;
			.search-bar {
				align-items: center;
				justify-content: center;
				display: flex;
				flex: 1;
				background-color: #f6f6f6;
				height: 60rpx;
				border-radius: 8rpx;
				width: 85%;
				margin-left: 7%;
				margin-top: 12px;
				i {
					margin-right: 20rpx;
					color: #999999;
					font-size: 32rpx;
				}
				input {
					display: flex;
					flex: 1;
					width: 90%;
					font-size: 28rpx;
					height: 32rpx;
					margin-top: 5rpx;
					margin: auto;
				}
				.cancle {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 60rpx;
					margin-left: 20rpx;
					i {
						color: #999999;
						font-size: 40rpx;
					}
				}
			}
		}
		.nav_ {
			width: 100%;
			background: #fff;
			height: 230rpx;
			.nav_c {
				margin-top: 20px;
				.nav_item {
					display: flex;
					justify-content: space-around;
					align-items: center;
					.item {
						text-align: center;
						.nav_name {
							font-size: 26rpx;
						}
					}
				}
			}
		}
		.category-c {
			height: 190rpx;
			background-color: white;
			padding-top: 100rpx;
			.grid-c {
				height: 170rpx;
				flex-wrap: wrap;
				display: flex;
				.item {
					width: 25%;
					background-color: white;
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
					img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
					}
					span {
						font-size: 20rpx;
						color: $textBlack-color;
						margin-top: 10rpx;
					}
				}
			}
		}
		.ad-c {
			display: flex;
			height: 200rpx;
			background-color: white;
			margin: 20rpx;
			.ad-img {
				height: 200rpx;
				width: 100%;
				background-size: cover;
			}
		}
		.b-banner {
			display: flex;
			flex-direction: column;
			background: #fff;
			.recommended {
				display: flex;
				background: #fff;
				align-items: center;
				height: 160rpx;
				margin: 20rpx;
				margin-top: 20rpx;
				img {
					height: 160rpx;
					width: 100%;
					background-size: cover;
				}
			}
			.hot-sale {
				background-color: white;
				width: 100%;
				.hot-sale_container {
					width: 94%;
					border-radius: 20rpx 20rpx 0 0;
					margin: auto;
					box-shadow: 1rpx 1rpx 1rpx 2rpx #f0efef;

					.hot_banner {
						width: 99%;
						margin: auto;
						background: rgba(0, 0, 0, 5);
						position: relative;
						border-radius: 10px 10px 0 0;
						height: 170rpx;

						img {
							width: 100%;
							margin: auto;
							height: 85px;
							border-radius: 10px 10px 0 0;
							opacity: 0.5;
						}
						.hot_img {
							position: absolute;
							color: #fff;
							bottom: 10px;
							left: 30%;
							font-size: 32rpx;
						}
						.hot_logo {
							width: 100rpx;
							height: 100rpx;
							border-radius: 10px;
							position: absolute;
							bottom: -10px;
							left: 5%;
							z-index: 1000;
						}
					}
					.section1 {
						font-size: 32rpx;
						color: $textBlack-color;
						margin-left: 8px;
						font-weight: bold;
						margin-top: 40rpx;
					}
				}
				.item_contain {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 20rpx;
				}
				.item {
					display: flex;
					flex-direction: column;
					width: 196rpx;
					padding: 0 20rpx;
					height: 163rpx;
					margin-top: 30rpx;
					.img-c {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						img {
							width: 196rpx;
							height: 163rpx;
							border-radius: 8rpx;
						}
						.name-c {
							display: flex;
							align-items: center;
							position: absolute;
							height: 30rpx;
							bottom: -15px;
							background: rgba($color: #000000, $alpha: 0.3);
							width: 160rpx;
							.name {
								font-size: 20rpx;
								color: white;
								margin: 0 10rpx;
								height: 30rpx;
								overflow: hidden;
							}
						}
					}
					.price {
						font-size: 24rpx;
						color: $mtRed-color;
						font-weight: 700;
						margin-top: 45rpx;
					}
				}
			}
		}
		.section {
			display: flex;
			align-items: center;
			margin: 20rpx;
			box-sizing: border-box;
			.m {
				font-size: 32rpx;
				color: $textBlack-color;
				margin: 0 20rpx;
				font-weight: bold;
			}
		}
		.category-list {
			display: flex;
			flex-direction: column;
			.filter-bar {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				background-color: white;
				height: 70rpx;
				border-top: 2rpx solid $spLine-color;
				border-bottom: 2rpx solid $spLine-color;
				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					span {
						font-size: 24rpx;
						color: $textDarkGray-color;
					}
					i {
						font-size: 24rpx;
						color: $textDarkGray-color;
						margin-left: 10rpx;
					}
				}
				.item:first-child {
					span {
						color: $textBlack-color;
					}
				}
			}
			.item-list {
				display: flex;
				flex-direction: column;
				background-color: white;
				.header {
					display: flex;
					align-items: center;
					background-color: white;
					justify-content: space-around;
					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #f8f8f8;
						flex: 1;
						margin-left: 20rpx;
						padding: 10rpx 0;
						span {
							font-size: 20rpx;
							color: $textDarkGray-color;
						}
					}
					.item:last-child {
						margin-right: 20rpx;
					}
				}
				.item {
					display: flex;
					background-color: white;
					margin: 20rpx;
					.item-l {
						display: flex;
						width: 160rpx;
						height: 120rpx;
						position: relative;
						img {
							width: 160rpx;
							height: 120rpx;
						}
						.tag {
							position: absolute;
							width: 100rpx;
							height: 60rpx;
						}
					}
					.item-r {
						margin-left: 20rpx;
						flex-direction: column;
						flex: 1;
						.r-t {
							display: flex;
							flex-direction: column;
							.shop-name {
								font-size: 28rpx;
								color: $textBlack-color;
								font-weight: bold;
							}
							.t-c {
								display: flex;
								align-items: center;
								margin-top: 10rpx;
								.c-l {
									display: flex;
									flex: 1;
									.l-l {
										display: flex;
										i {
											font-size: 20rpx;
											color: $theme-color;
											margin-right: 10rpx;
										}
									}
									.l-m {
										font-size: 20rpx;
										color: $textBlack-color;
										margin-left: 10rpx;
									}
									.l-r {
										font-size: 20rpx;
										color: $textBlack-color;
										margin-left: 20rpx;
									}
								}
								.c-r {
									display: flex;
									align-items: center;
									.r-l {
										font-size: 20rpx;
										color: $textBlack-color;
									}
									.r-m {
										width: 2rpx;
										height: 20rpx;
										background-color: $textGray-color;
										margin: 0 10rpx;
									}
									.r-r {
										font-size: 20rpx;
										color: $textBlack-color;
									}
								}
							}
						}
						.r-m {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							.m-l {
								font-size: 20rpx;
								color: $textBlack-color;
							}
							.m-m {
								width: 2rpx;
								height: 20rpx;
								margin: 0 10rpx;
								background-color: $textGray-color;
							}
							.m-r {
								font-size: 20rpx;
								color: $textBlack-color;
							}
						}
						.r-b {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							.b-l {
								color: #09cfb5;
								font-size: 20rpx;
								border: 2rpx solid #09cfb5;
								text-align: center;
								padding: 0 8rpx;
							}
							.b-r {
								@extend .b-l;
								margin-left: 10rpx;
							}
						}
						.activity-c {
							display: flex;
							flex-direction: column;
							.ac-item {
								display: flex;
								align-items: center;
								margin-top: 20rpx;
								.ac {
									display: flex;
									align-items: center;
									.ac-l {
										width: 30rpx;
										height: 30rpx;
										background-size: cover;
									}
									.ac-r {
										color: $textDarkGray-color;
										font-size: 20rpx;
										margin-left: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
